<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group title="授权员工列表">
        <van-swipe-cell v-for="item in employees" :key="item.id">
          <van-cell
            :key="item.id"
            :title="item.name"
            :value="item.role_name"
          >
          </van-cell>
          <template #right>
            <van-button
              class="swipe-cell-button"
              square
              type="danger"
              text="取消"
              @click="onCancel(item.id)"
            />
          </template>
        </van-swipe-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import { getEmployees, deleteEmployee } from "@/api/member";

export default {
  name: "EmployeeList",

  data() {
    return {
      title: this.$route.meta.title,

      employees: [],
      loading: false,
      finished: false,

      employee_id: null,
      show: false,
      showCalendar: false,
      end_date: null,

      listQuery: {
        page: 1,
        page_size: 10,
      },
    };
  },

  mounted() {},

  methods: {
    onLoad() {
      this.getEmployeeList();
    },
    getEmployeeList() {
      this.loading = true;
      getEmployees(this.listQuery)
        .then((res) => {
          if (res.data.results.length == 0) {
            this.employees = [];
            this.finished = true;
          }
          this.listQuery.page = res.data.page;
          this.loading = false;
          this.employees.push(...res.data.results);
          if (this.employees.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$toast("获取授权员工失败!");
        });
    },


    onShow(employee_id) {
      this.show = true;
      this.employee_id = employee_id;
    },

    onCancel(id) {
      this.$dialog
        .confirm({
          title: "取消授权确认",
          message: "真的要取消该员工的授权吗?",
        })
        .then(() => {
          // on confirm
          const params = {
            id: id,
          };
          deleteEmployee(params).then((res) => {
            if (res.status == 204) {
              const index = this.employees.findIndex((v) => v.id == id);
              this.employees.splice(index, 1);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style>
</style>